<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>消息列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link href="css/iconfont.css" rel="stylesheet"/>
		<style>
		.mui-card .mui-control-content {
			padding: 10px;
		}
		.mui-control-content {
			height: 150px;
		}
		.mui-nav-head{
			margin:20px 0px 10px;;
		}
		
    	.mui-table-view-cell>.mui-ellipsis{
    	word-break: break-all;
    	word-wrap: break-word;
    	white-space:normal ;
    	text-align: left;
    	width:125%;
    	}
    	.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell{
    		padding-left:0px;
    	}
    	
    	.mui-table-view-cell.mui-collapse,.mui-table-view-cell.mui-collapse.mui-active{
    		margin-top: -26px;
    	}
    	.mui-table-view-cell.mui-active{
    		background-color:white;
    	}
    	.mui-table-view-cell{
    		margin-left:15px;
    		top:-5px;
    	}
    	.mui-table-view-cell>a:not(.mui-btn).mui-active{
    		background-color: white;
    	}
		.mui-table-view{
			padding:10px 10px;
		} 
		.mui-table-view li{
			border-top:1px solid #eee;
			padding:5px 0px;
		}  
		.mui-table-view li:first-child{
			border:none;
		}	
		.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after{
			height:0px;
		}
		.mui-table-view>li>input{
			margin-top: 8px;
		}
		.mui-table-view-cell.mui-collapse .mui-table-view{
			margin-bottom: -32px;
			margin-left: -24px;
		}
		.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron{
			margin-top: 0px;
		}
		.mui-table-view li>button{
			margin-right:10px;
			margin-left:10px;
		}
		.mui-table-view>li>button:first-child{
			margin-right: 50px;
		}
		</style>
	</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">消息列表</h1>
	</header>	
	<div class="mui-content">
		<div class="mui-nav-head" style="padding: 0px 10px 10px;">
			<div id="segmentedControl" class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="#item1">
				未读信息
				</a>
				<a class="mui-control-item" href="#item2">
				已读信息
				</a>
			</div>
		</div>
		<div id="item1" class="mui-control-content mui-active">
			<ul class="mui-table-view mui-table-view-chevron">
				<li >
					<input type="checkbox" name="btn" id="btn" /> <button class="mui-btn  mui-btn-primary"><label for="btn">全选</label></button>  <button id="btn2" class="mui-btn   mui-btn-primary ">标为已读</button> <button id="btn3" class="mui-btn mui-btn-danger "> 删除 </button>     <br />
				</li>
				<li>
					<input type="checkbox" name="choose" id="checkbox1"/>
					<div class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
						消息标题<br />
						消息发送时间										
						</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容</p>
							</li>
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这是服务器发送时间</p>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<input type="checkbox" name="choose" id="checkbox2"/>
					<div class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
						消息标题<br />
						消息发送时间										
						</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容</p>
							</li>
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这是服务器发送时间</p>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<input type="checkbox" name="choose" id="checkbox3"/>
					<div class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
						消息标题<br />
						消息发送时间										
						</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容</p>
							</li>
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这是服务器发送时间</p>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<input type="checkbox" name="choose" id="checkbox4"/>
					<div class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
						消息标题<br />
						消息发送时间										
						</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容</p>
							</li>
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这是服务器发送时间</p>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		
		<div id="item2" class="mui-control-content">
			<ul class="mui-table-view mui-table-view-chevron">
				<li >
					<input type="checkbox" name="btn" id="btn" /> <button class="mui-btn  mui-btn-primary"><label for="btn">全选</label></button>  <button id="btn2" class="mui-btn mui-btn-danger"> 删除 </button> <br />
				</li>
				<li>
					<input type="checkbox" name="choose" id="checkbox1"/>
					<div class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
						消息标题<br />
						消息发送时间										
						</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容</p>
							</li>
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这是服务器发送时间</p>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<input type="checkbox" name="choose" id="checkbox2"/>
					<div class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
						消息标题<br />
						消息发送时间										
						</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容</p>
							</li>
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这是服务器发送时间</p>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<input type="checkbox" name="choose" id="checkbox3"/>
					<div class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
						消息标题<br />
						消息发送时间										
						</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容</p>
							</li>
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这是服务器发送时间</p>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<input type="checkbox" name="choose" id="checkbox4"/>
					<div class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
						消息标题<br />
						消息发送时间										
						</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容这段是消息的内容</p>
							</li>
							<li class="mui-table-view-cell">
								<p class='mui-ellipsis'>这是服务器发送时间</p>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	
	</div>
	
	
	
	
	<script src="js/mui.min.js"></script>
	<script>
//		mui.init({
//			swipeBack:true //启用右滑关闭功能
//		});
</script>
 <script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn');
    var oBtn2 = document.getElementById('btn2');
    var oInput = document.getElementsByName('choose');
    var btn4 =document.getElementById('btn4');
    
    for(var i = 0;i < oInput.length; i++){
        oInput[i].onclick = function(){
            this.checked ? allCheck() : oBtn.checked = false;
        };
    };
    
    //全选
    oBtn.onclick = function(){
        for(var i = 0;i < oInput.length; i++){
            oBtn.checked ? oInput[i].checked = true : oInput[i].checked = false;
        };
    };
    
    //反选
    oBtn2.onclick = function(){
        for(var i = 0;i < oInput.length; i++){
            oInput[i].checked = !oInput[i].checked;
        };
        allCheck();
    };
    
    //删除
     
};

//判断是否全选
function allCheck(){
    var oBtn = document.getElementById('btn');
    var oInput = document.getElementsByName('choose');
    var allCheck = true;
    for(var i = 0;i < oInput.length; i++){
        if(!(oInput[i].checked)) allCheck = false;
    };
    allCheck ? oBtn.checked = true : oBtn.checked = false;
};
</script>
</body>

</html>